<template>
  <div class="container">
    <div class="top-banner">
      <div class="logo-container">
        <div class="logo-title">互联网应用服务</div>
        <div class="version">V 1.0</div>
      </div>

      <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="hover">
        <div class="avatar-wrapper">
          <div class="banner-user-avatar" v-if="user.nickName">{{ user.nickName[0] }}</div>
          <div>{{ user.nickName }}</div>
          <i class="el-icon-caret-bottom" style="margin-left: 10px !important;"/>
        </div>
        <el-dropdown-menu slot="dropdown">
          <router-link to="/">
            <el-dropdown-item>首页</el-dropdown-item>
          </router-link>
          <router-link to="/user/profile">
            <el-dropdown-item>个人中心</el-dropdown-item>
          </router-link>
          <el-dropdown-item divided @click.native="logout">
            <span>退出登录</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>

    </div>
    <div :class="classObj" class="app-wrapper" :style="{ '--current-color': theme }">
      <sidebar class="sidebar-container" :menus="menus" :active-menu="queryParams.type"
        @handleSelectMenu="handleSelectMenu" />
      <div class="main-container">
        <div :class="{ 'fixed-header': fixedHeader }" style="height: 50px; display: flex; align-items: center; background-color: #F2F4F6 !important">

          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item style="color: rgb(151, 168, 190) !important;">舆情报送</el-breadcrumb-item>
            <el-breadcrumb-item style="color: #1F2329 !important;">{{tabList[queryParams.type - 1].label}}</el-breadcrumb-item>
<!--            <el-breadcrumb-item style="color: #1F2329">{{previewDetail.type}}</el-breadcrumb-item>-->
          </el-breadcrumb>

  <!--        <tags-view :selected-menus="selectedMenus" :active-menu="queryParams.type" @handleCloseTag="handleCloseTag"
            @handleClickTag="handleSelectMenu" />-->
        </div>
        <section class="app-main">
          <div class="app-container" style="height: 100%">
            <div style="display: flex; align-items: flex-start; justify-content: space-between">
              <el-form :model="queryParams" ref="queryForm" size="mini" :inline="true">
                <el-form-item prop="title">
                  <el-input v-model="queryParams.title" placeholder="请输入标题" clearable style="width: 240px"
                            @keyup.enter.native="handleQuery" @clear="handleQuery"/>
                </el-form-item>
                <el-form-item>
                  <el-date-picker v-model="dateRange" style="width: 240px" value-format="yyyy-MM-dd" type="daterange"
                                  range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" @change="handleQuery"></el-date-picker>
                </el-form-item>
                <el-form-item>
<!--                  <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>-->
                  <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                </el-form-item>
              </el-form>
              <div class="btn-container">
                <el-row :gutter="10" class="mb8">
                  <el-col :span="1.5">
                    <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['feeling:user:add']">新增
                    </el-button>
                  </el-col>
                  <el-col :span="1.5">
                    <!--<el-button icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['feeling:user:download']">下载
                    </el-button>-->
                  </el-col>
                </el-row>
              </div>
            </div>



            <el-table v-loading="loading" :data="arrayList" height="calc(100% - 141px)">
              <el-table-column label="序号" type="index" width="50">
              </el-table-column>
              <el-table-column label="标题" prop="title" width="500">
                <template slot-scope="scope">
                  <el-popover
                    placement="top-start"
                    :width="200"
                    trigger="hover"
                    :content="scope.row.title"
                  >
                    <template #reference>
<!--                      <el-button class="m-2">Hover to activate</el-button>-->
                      <el-button type="text" @click="handleView(scope.row)">{{ scope.row.title }}</el-button>
                    </template>
                  </el-popover>

<!--                  <el-button type="text" @click="handlePreview(scope.row)">{{ scope.row.title }}</el-button>-->
                </template>
              </el-table-column>
              <el-table-column label="编号" prop="number" :show-overflow-tooltip="true" />
              <el-table-column label="报送部门" prop="department" :show-overflow-tooltip="true" />
              <el-table-column label="报送领导" prop="leader" :show-overflow-tooltip="true" />
              <el-table-column label="登记人" prop="publisher" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                  <span>{{ user.nickName }}</span>
                </template>
              </el-table-column>
              <el-table-column label="时间" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                  <span>{{ parseTime(scope.row.createTime) }}</span>
                </template>
              </el-table-column>
            </el-table>
            <!--分页-->
            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize" @pagination="getList" />
          </div>
        </section>
      </div>
    </div>

    <!-- 添加或修改参数配置对话框 -->
    <el-dialog title="新增" :visible.sync="open" width="1000px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item :label="activeMenuText">
          {{ form.number }}
          <el-button @click="changeNumber" style="margin-left: 20px" size="small">重新生成</el-button>
        </el-form-item>
        <el-form-item label="标题" prop="title">
          <el-input v-model="form.title" placeholder="请输入标题" maxlength="200" show-word-limit />
        </el-form-item>
        <el-form-item label="网页链接" prop="url" v-if="queryParams.type <= 2">
          <el-input v-model="form.url" placeholder="请输入网页链接" maxlength="500" show-word-limit />
        </el-form-item>


        <el-form-item label="报送部门" prop="department">
          <el-input v-model="form.department" style="width: 100%" placeholder="请选择要报送的部门" maxlength="200" show-word-limit />
          <!--<el-select v-model="form.department" style="width: 100%" placeholder="请选择部门" clearable filterable>
            <el-option v-for="(item, index) in bossOptions" :key="index" :label="item.nickName"
                       :value="item.nickName" />
          </el-select>-->
        </el-form-item>
        <el-form-item label="报送领导" prop="leader">
          <el-input v-model="form.leader" style="width: 100%" placeholder="请选择要报送的领导" maxlength="50" show-word-limit />
        <!--  <el-select v-model="form.leader" placeholder="请选择要报送的领导" clearable filterable>
            <el-option v-for="(item, index) in bossOptions" :key="index" :label="item.nickName"
              :value="item.nickName" />
          </el-select>-->
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <div id="editor"></div>
<!--          <el-input v-model="form.content" type="textarea" :rows="15" placeholder="请输入内容" />-->
        </el-form-item>
        <el-form-item label="样本附件" prop="attachInfoNewList">
          <el-button size="small" type="primary" icon="el-icon-upload" @click="openDialog">点击上传</el-button>
          <div v-if="form.attachInfoNewList">
            <div v-for="(item, i) in form.attachInfoNewList" :key="i"
              style="display: flex; align-items: center; justify-content: flex-start">
              <div style="margin: 0 20px 0 0">{{ item.name }}</div>
              <el-button type="text" @click="delFile(item)">删 除</el-button>
            </div>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" :loading="addLoading" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog title="上传文件" :visible.sync="uploadOpen" :close-on-click-modal="false" close-on-press-escape
      destroy-on-close width="550px">
      <el-upload class="upload-demo" drag ref="upload" :action="uploadUrl" :headers="headers"
        :before-upload="beforeUpload" :on-success="handleSuccess" :before-remove="beforeRemove"
        :on-remove="handleRemove" :on-change="handleChange" :file-list="form.attachInfoNewList" :show-file-list="true"
        :auto-upload="false"
        accept=".png, .jpg, .jpeg, .mp3, .mp4, .avi, .txt, .doc, .docx, .pdf, .xls, .xlsx, .zip, .rar" multiple>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">
          仅允许导入PNG、JPG、JPEG、MP3、WAV、MP4、AVI、TXT、DOC、DOCX、pdf、xls、xlsx、zip、rar格式且不大于500M的文件。
        </div>

      </el-upload>
      <div style="width: inherit; display: flex; justify-content: center">
        <el-button size="small" type="success" @click="submitUpload">上传到服务器</el-button>
      </div>
    </el-dialog>

    <el-dialog title="详情" :visible.sync="isOpen" @closed="detailClose">
      <el-form :model="ruleForm" ref="ruleForm" labelPosition="right" label-width="80px"
               label-position="right">

        <el-row type="flex" justify="space-around">
          <el-col :span="23">
            <el-form-item label="快报编号" prop="articleTitle">
              <div>{{ruleForm.number}}</div>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex" justify="space-around">
          <el-col :span="23">
            <el-form-item label="标题" prop="title">
              <el-input v-model="ruleForm.title" :maxlength="50" show-word-limit disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex" justify="space-around" v-if="ruleForm.type <= 2">
          <el-col :span="23">
            <el-form-item label="网页链接" prop="url">
              <el-input v-model="ruleForm.url" show-word-limit disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex" justify="space-around">
          <el-col :span="23">
            <el-form-item label="类别" prop="type">
              <el-select
                v-model="ruleForm.type"
                placeholder="请选择报送类别"
                style="width: 240px"
                clearable
                @change="handleQuery"
                :disabled="true"
              >
                <el-option
                  v-for="(type, i) in dict.type.review_type_new"
                  :key="type.value"
                  :label="type.label"
                  :value="type.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex" justify="space-around">
          <el-col :span="11">
            <el-form-item label="报送部门" prop="department">
              <el-input v-model="ruleForm.department" :maxlength="100" show-word-limit disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="报送领导" prop="leader">
              <el-input v-model="ruleForm.leader" :maxlength="50" show-word-limit disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex" justify="space-around">
          <el-col :span="23">
            <el-form-item label="内容" prop="content">
              <div id="detailEditor"></div>
<!--              <div class="text-area" v-html="ruleForm.content"></div>-->
              <!-- <el-input class="text-area" type="textarea" v-html="ruleForm.content" disabled :rows="10"></el-input> -->
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex" justify="space-around" v-if="ruleForm.attachInfoNewList && ruleForm.attachInfoNewList.length > 0">
          <el-col :span="23">
            <el-form-item label="样本附件" prop="attachInfos" style="float: left">
              <div v-if="ruleForm.attachInfoNewList">
                <div v-for="(item, i) in ruleForm.attachInfoNewList" :key="i"
                     style="display: flex; align-items: center; justify-content: flex-end">
<!--                  <div style="margin: 0 20px 0 0">{{item.name}}</div>-->
                  <el-tooltip content="请去内网下载查看" placement="top">
                    <div style="margin: 0 20px 0 0">{{item.name}}</div>
                  </el-tooltip>
<!--                  <el-button type="text" @click="downloadFile(item)">下 载</el-button>-->
                </div>
              </div>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
    </el-dialog>

    <el-dialog title="预览" :visible.sync="previewOpen" class="scrollbar" width="1000px">
      <div class="a4-container">
        <h1 style="text-align: center">拉萨市公安局网安支队{{previewDetail.type}}拟办卡</h1>
        <p>
          <span style="margin-right: 12px">{{ previewDetail.number }}</span>
          <span>{{ parseTime(previewDetail.createTime) }}</span>
        </p>
        <div class="divider" />
        <div style="height: 500px; padding: 16px">
          <el-scrollbar style="height: 100%">
            <h2 style="text-align: center">{{ previewDetail.title }}</h2>
            <div v-html="previewDetail.content" style="padding: 0 35px"></div>
          </el-scrollbar>
        </div>
        <div class="divider" />
        <div style="height: 250px; padding: 10px 35px">审签：</div>
        <div class="divider" />
        <div style="display: flex; height: 150px">
          <div style="width: 50%; padding: 10px 35px">初核：</div>
          <div style="width: 50%; border-left: 1px solid #000; padding: 10px 10px">审核：</div>
        </div>
        <div class="divider" />
        <div style="display: flex; align-items: center; height: 50px">
          <div style="width: 50%; padding: 10px 35px">报送领导：{{ previewDetail.leader }}</div>
          <div style="width: 50%; padding: 10px 35px">拟稿：{{ previewDetail.publisherName }}</div>
        </div>
        <div class="divider" />
      </div>
      <div slot="footer" class="dialog-footer">
        <div style="display: flex; justify-content: space-between; align-items: center">
          <div style="display: flex">
            <div style="line-height: 36px; margin-right: 16px">附件: </div>
            <ul style="margin: 0; padding: 0;">
              <li v-for="(item, index) in previewDetail.attachInfoNewList" style="list-style: none">
                <el-button type="text" @click="handleDownload(item)">{{ item.name }}</el-button>
              </li>
            </ul>
          </div>
          <div>
            <el-button type="primary" @click="handlePrint">打 印</el-button>
            <el-button @click="cancelPreview">取 消</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { AppMain, Sidebar, TagsView } from './components'
import ResizeMixin from '@/layout/mixin/ResizeHandler'
import { mapGetters, mapState } from 'vuex'
import variables from '@/assets/styles/variables.scss'
import E from "wangeditor"
import { getUserProfile } from "@/api/system/user";
import { getRouters } from "@/api/menu";
import { downloadFile, uploadFile, getReviewDetail } from "@/api/system/application"
import { allUser, generateNumber, listReviewInfo, addReviewInfo, detailReviewInfo, downloadPrint } from "@/api/feelings"
import { getToken } from "@/utils/auth";
import { blobValidate } from "@/utils/ruoyi";
import errorCode from '@/utils/errorCode'
import { saveAs } from 'file-saver'

export default {
  name: 'FeelingsLayout',
  dicts: ['review_type_new'],
  components: {
    AppMain,
    Sidebar,
    TagsView
  },
  mixins: [ResizeMixin],
  computed: {
    ...mapState({
      theme: state => state.settings.theme,
      sideTheme: state => state.settings.sideTheme,
      sidebar: state => state.app.sidebar,
      fixedHeader: state => state.settings.fixedHeader
    }),
    ...mapGetters([
      'avatar',
    ]),
    classObj() {
      return {
        openSidebar: this.sidebar.opened,
        withoutAnimation: this.sidebar.withoutAnimation,
      }
    },
    variables() {
      return variables;
    },
    activeMenuText() {
      if (this.menus.length && this.menus[0].children) {
        return this.menus[0].children.find(item => item.query === this.queryParams.type).meta.title
      } else {
        return '编号'
      }
    }
  },
  data() {
    return {
      isOpen: false,
      user: {},
      menus: [],
      selectedMenus: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        type: undefined,
        title: undefined,
      },
      dateRange: [],
      total: 0,
      arrayList: [],
      loading: false,
      open: false,
      addLoading: false,
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' },
          { max: 200, message: '标题最多200个字符', trigger: 'blur' },
        ],
        url: [
          { required: true, message: '请输入网页链接', trigger: 'blur' },
          // { max: 30, message: '最多30个字符', trigger: 'blur' },
        ],
 /*       leader: [
          { required: true, message: '请选择要报送的领导', trigger: 'submit' },
        ],
        department: [
          { required: true, message: '请选择报送部门', trigger: 'submit' },
        ],*/
        content: [
          { required: true, message: '请填写样本内容', trigger: 'submit' }
        ],
      },
      bossOptions: [],
      editor: null,
      detailEditor: null,
      uploadOpen: false,
      uploadUrl: process.env.VUE_APP_BASE_API + "/application/upload/file", // 上传的图片服务器地址
      headers: {
        Authorization: "Bearer " + getToken()
      },
      files: [],
      maxSize: 500,
      previewOpen: false,
      previewDetail: {
        title: '',
        createTime: '',
        number: '',
        content: '',
        attachInfoNewList: []
      },
      ruleForm: {},
      tabList: [{
        label: "境内快报",
        value: 1
      },{
        label: "境外快报",
        value: 2
      },{
        label: "综合研判",
        value: 3
      },{
        label: "方案计划",
        value: 4
      },]
    }
  },
  mounted() {
    this.getUser()
    this.getMenu()
  },
  beforeDestroy() {
    if (this.editor) {
      this.editor.destroy()
      this.editor = null
    }
    if(this.detailEditor) {
      this.detailEditor.destroy()
      this.detailEditor = null
    }
  },
  methods: {
    //查看详情
    handleView(row) {

      this.isOpen = true
      // this.ruleForm = row

      getReviewDetail(row.id).then(res => {
        if(res.code === 200) {
          this.ruleForm = res.data

          this.$nextTick(() => {
            this.detailEditor = new E('#detailEditor')//创建对象
            this.detailEditor.config.menus = [
              "head",
              "bold",
              "fontSize",
              "fontName",
              "italic",
              "underline",
              "strikeThrough",
              "indent",
              "lineHeight",
              "foreColor",
              "backColor",
              "link",
              "list",
              "todo",
              "justify",
              "quote",
              "emoticon",
              "table",
              "code",
              "splitLine",
              "undo",
              "redo"
            ]
            this.detailEditor.create()
            let eds = document.getElementsByClassName('w-e-text-container')
            eds[0].style = eds[0].style.cssText + 'height: 200px'
            this.detailEditor.showMenuTooltips = false
            this.detailEditor.disable(() => {
              return true;
            })
            this.detailEditor.txt.html(this.ruleForm.content)
          })
        }
      })
    },
    getType(str) {
      let type = ""
      switch(parseInt(str)) {
        case 1:
          type = "境内快报";
          break;
        case 2:
          type = "境外快报";
          break;
        case 3:
          type = "综合研判";
          break;
        case 4:
          type = "方案计划";
          break;
      }
      return type;
    },
    handleSelectMenu(value) {
      this.queryParams.type = value
      if (this.selectedMenus.every(item => item.query !== value)) {
        let activeItem = this.menus[0].children.find(item => item.query === value)
        this.selectedMenus.push(activeItem)
      }
      this.handleQuery()
    },
    handleCloseTag(value) {
      let index = this.selectedMenus.findIndex(item => item.query === value)
      this.selectedMenus.splice(index, 1)
      if (this.queryParams.type === value) {
        this.queryParams.type = this.selectedMenus[0].query
        this.handleQuery()
      }
    },
    handleQuery() {
      this.queryParams.pageNum = 1
      if (this.dateRange && this.dateRange.length) {
        this.queryParams.startTime = this.dateRange[0]
        this.queryParams.endTime = this.dateRange[1]
      } else {
        this.queryParams.startTime = null
        this.queryParams.endTime = null
      }
      this.getList()
    },
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    handleAdd() {
      this.reset();
      generateNumber().then(res => {
        this.form.number = res.msg
        this.open = true;
        this.$nextTick(() => {
          this.editor = new E('#editor')//创建对象
          this.editor.config.menus = [
            "head",
            "bold",
            "fontSize",
            "fontName",
            "italic",
            "underline",
            "strikeThrough",
            "indent",
            "lineHeight",
            "foreColor",
            "backColor",
            "link",
            "list",
            "todo",
            "justify",
            "quote",
            "emoticon",
            "table",
            "code",
            "splitLine",
            "undo",
            "redo"
          ]
          this.editor.create()
          let eds = document.getElementsByClassName('w-e-text-container')
          eds[0].style = eds[0].style.cssText + 'height: 200px'
        })
      })
      allUser().then(res => {
        this.bossOptions = res.data
      })
    },

    changeNumber() {
      generateNumber().then(res => {
        this.form.number = res.msg
      })
    },

    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        number: undefined,
        title: undefined,
        leader: [],
        content: undefined,
        publisher: undefined,
        publisherName: undefined,
        url: undefined,
        department: undefined,
        attachInfoNewList: [],
        type: this.queryParams.type
      };
      if (this.editor) {
        this.editor.destroy()
        this.editor = null
      }
      if (this.detailEditor) {
        this.detailEditor.destroy()
        this.detailEditor = null
      }
      this.resetForm("form");
    },
    submitForm() {
      this.form.content = this.editor.txt.html();
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.addLoading = true
          this.form.publisher = this.user.userName
          this.form.publisherName = this.user.nickName
          let payload = {
            ...this.form,
            leader: this.form.leader.toString()
          }
          addReviewInfo(payload).then(res => {
            if (res.code === 200 && res.data) {
              this.$message.success(res.msg)
            }
            this.open = false;
            this.handleQuery()
            this.addLoading = false
          }).catch(() => {
            this.addLoading = false
          })
        }
      })
    },
    openDialog() {
      this.uploadOpen = true
    },
    //切换文件时
    handleChange(file, list) {
      this.files = list
    },
    //开始上传
    beforeUpload(file) {
      if (file.size / 1024 / 1024 > this.maxSize) {
        this.$message.error({
          message: `上传文件大小不能超过${this.maxSize}M!`,
        });
        return false;
      }
    },
    //上传文件成功
    handleSuccess(response, file, fileList) {
      this.$message.success("上传成功")
      file.attachUrl = response.msg
      this.form.attachInfoNewList.push(file)
    },
    //删除列表文件
    delFile(file) {
      let index = this.form.attachInfoNewList.indexOf(file)
      this.form.attachInfoNewList.splice(index, 1)
    },
    submitUpload() {
      let temp = this.files
      let form = new FormData();
      this.files.forEach(e => {
        form.append("files", e.raw)
      })
      uploadFile(form).then(res => {
        console.log(res)
        if (res.code === 200) {
          let fileNames = res.fileNames.split(',');
          let newFileNames = res.newFileNames.split(',');
          let originalFilenames = res.originalFilenames.split(',');
          let urls = res.urls.split(',');
          for (let i = 0; i < fileNames.length; i++) {
            let obj = {
              name: originalFilenames[i],
              attachUrl: fileNames[i]
            }
            this.form.attachInfoNewList.push(obj)
          }
          console.log(this.form.attachInfoNewList)
          this.$message.success(res.msg)
        } else {
        }
      }).catch(err => {
      })
    },
    //删除前钩子
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    //删除
    handleRemove(file, fileList) {
      if (!file.attachUrl) {
        // let i = this.files.indexOf(file);
        // console.log(i)
        // this.files.splice(i, 1)
      } else {
        let index = this.form.attachInfoNewList.indexOf(file);
        this.form.attachInfoNewList.splice(index, 1)
      }
    },
    handleExport() {
      this.download('/reviewInfo/new/export', {
        ...this.queryParams
      }, `舆情报送列表_${new Date().getTime()}.xlsx`)
    },
    handlePreview(row) {
      detailReviewInfo(row.id).then(res => {

        this.previewDetail = res.data
        this.previewDetail.type = this.getType(res.data.type)
        this.previewOpen = true
      })
    },
    handlePrint() {
      downloadPrint(this.previewDetail.id).then(res => {
        saveAs(res, `舆情报送信息_${new Date().getTime()}.doc`)
      })
    },
    cancelPreview() {
      this.previewDetail = {
        title: '',
        createTime: '',
        number: '',
        content: '',
        attachInfoNewList: []
      }
      this.previewOpen = false
    },
    handleDownload(file) {
      let payload = {
        resource: file.attachUrl
      }
      downloadFile(payload).then(async (data) => {
        const isBlob = blobValidate(data);
        if (isBlob) {
          const blob = new Blob([data])
          saveAs(blob, file.name)
        } else {
          const resText = await data.text();
          const rspObj = JSON.parse(resText);
          const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode['default']
          this.$message.error(errMsg);
        }
      })
    },
    getUser() {
      getUserProfile().then(res => {
        this.user = res.data;
      });
    },
    getMenu() {
      getRouters('review').then(res => {
        this.menus = res.data
        if (this.menus.length > 0) {
          // this.queryParams.type = this.menus[0].children[0].query
          this.handleSelectMenu(this.menus[0].children[0].query)
        }
      })
    },
    getList() {
      listReviewInfo(this.queryParams).then(res => {
        console.log(res)
        this.arrayList = res.rows
        this.total = res.total
      })
    },
    async logout() {
      this.$confirm('确定注销并退出系统吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('LogOut').then(() => {
          location.href = '/index';
        })
      }).catch(() => {
      });
    },

    detailClose() {
      this.isOpen = false
      this.ruleForm = {}
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/mixin.scss";
@import "~@/assets/styles/variables.scss";

.btn-container {
  display: flex;
  align-items: center;
}

::v-deep .el-breadcrumb__inner {
  color: inherit !important;
}

.banner-user-avatar {
  float: left;
  width: 26px;
  height: 26px;
  margin-right: 6px;
  line-height: 26px;
  text-align: center;
  background-color: #409EFF;
  border-radius: 50%;
  border: 1px solid #fff;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.top-banner {
  position: fixed;
  height: 56px;
  width: 100vw;
  background-color: #031A2E;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 2;

  .logo-container {
    display: flex;
    align-items: center;

    .logo-title {
      font-family: PangMenZhengDao;
      font-size: 18px;
      color: #FFFFFF;
      margin-right: 12px;
      margin-left: 32px;
    }

    .version {
      background-image: linear-gradient(270deg, #76C0FF 0%, #1B58FF 100%);
      border-radius: 4px;
      font-family: Tensentype-RuiHeiJ-W5;
      font-size: 12px;
      color: #FFFFFF;
      letter-spacing: 0;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 3px 8px;
    }
  }

  .avatar-container {
    margin-right: 32px;
    position: relative;

    .avatar-wrapper {
      margin-top: 5px;
      position: relative;
      display: flex;
      align-items: center;
      font-family: PingFangSC-Medium;
      font-size: 14px;
      color: #FFFFFF;
      letter-spacing: 0;

      .user-avatar {
        cursor: pointer;
        width: 30px;
        height: 30px;
        border-radius: 15px;
        margin-right: 13px;
      }

      .el-icon-caret-bottom {
        cursor: pointer;
        margin-left: 56px;
        /*position: absolute;
        right: -20px;
        top: 25px;*/
        font-size: 12px;
      }
    }
  }
}

.app-wrapper {
  @include clearfix;
  position: relative;
  height: 100%;
  width: 100%;
  margin-top: 56px;

  &.mobile.openSidebar {
    position: fixed;
    top: 0;
  }
}

.fixed-header {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9;
  width: calc(100% - #{$base-sidebar-width});
  transition: width 0.28s;
}

.app-main {
  height: calc(100% - 34px);
  width: 100%;
  position: relative;
  overflow: hidden;
}

.upload-demo {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column;
}

.a4-container {
  width: 794px;
  height: 1132px;
  border: 1px solid #000;
  margin: 0 auto;

  .divider {
    margin: 0 30px;
    border-top: 1px solid #000;
  }

  p {
    text-align: center;
  }
}

.el-scrollbar {
  ::v-deep .el-scrollbar__wrap {
    overflow-x: hidden;
  }

  ::v-deep .is-horizontal {
    display: none;
  }
}

  .text-area {
    background-color: #F5F7FA;
    border: 1px solid #dfe4ed;
    cursor: not-allowed;
    border-radius: 4px;
  }
</style>
